<template>
  <FaLayout v-loading="loading" :right="240" :left="false">
    <AppHeader slot="header" />

    <FaContract ref="viewer" :docs="docs" :doc-index.sync="docIndex" :page-src="getPageImg" />

    <FaThumbs slot="right" :viewer="viewer" :docs="docs" :doc-index.sync="docIndex" />
  </FaLayout>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, Ref, ref, toRefs } from 'vue'
import { DocData, Viewer } from 'fdd-contract'
import AppHeader from '../components/AppHeader.vue'
import { getDetail, getPageImg } from '../utils/mock'

/** 文档查看 */
export default defineComponent({
  name: 'ContractView',
  components: { AppHeader },

  setup() {
    /** 合同控件 */
    const viewer = ref(null) as Ref<Viewer | null>

    /** 详情数据 */
    const detail = reactive({
      /** 文档列表 */
      docs: [] as DocData[]
    })

    /** 加载中 */
    const loading = ref(false)

    /** 当前文档索引 */
    const docIndex = ref(0)

    /** 详情加载 */
    async function load() {
      try {
        loading.value = true

        const { docs } = await getDetail()

        Object.assign(detail, { docs })
      } finally {
        loading.value = false
      }
    }

    onMounted(load)

    return {
      ...toRefs(detail),

      /** 合同控件 */
      viewer,

      /** 获取文档页面图片地址 */
      getPageImg,

      /** 加载中 */
      loading,

      /** 当前文档索引 */
      docIndex
    }
  }
})
</script>
